<template>
	<div class="block">
		<div class="list">
			<div
				class="item"
				v-for="item in list"
				:key="item.name"
				@click="onClick(item)"
			>
				<p>
					<span>{{ item.value }}</span>
					<span>{{ item.unit }}</span>
				</p>
				<p>{{ item.name }}</p>
			</div>
		</div>

		<div class="chart-list">
			<div
				class="item"
				v-for="(item, index) in data"
				:key="index"
			>
				<component
					:is="block房屋核查情况统计_chart"
					:list="item"
					@click="onClick(index)"
					:key="index"
				/>
				<p :class="{active: activeIndex === index}">{{ title[index] }}</p>
			</div>
		</div>

	</div>
</template>

<script setup>
import { ref, computed, onMounted, defineProps, defineEmits, watch } from 'vue'
import { zctj_hc_pie, zctj_hc } from '@/service/village'
import block房屋核查情况统计_chart from './block房屋核查情况统计_chart'

const props = defineProps({
	date: {
		type: Object,
		default: () => []
	},
	modelValue: {
		type: Number,
		default: 2
	}
})

const emits = defineEmits(['update:modelValue'])

const title = [
	'乡镇核验率',
	'区级核验率',
	'市级核验率',
]
const data = ref(new Array(3).fill([
	{ name: '已核验', value: 0 },
	{ name: '未核验', value: 0 },
]))
const activeIndex = ref(0)

const list = ref([
	{
		name: '房屋总数量',
		value: 0,
		res: 'zcount',
		unit: '栋'
	},
	{
		name: '已核验数量',
		value: 0,
		res: 'zccount',
		unit: '栋'
	},
	{
		name: '未核验数量',
		value: 0,
		res: 'wzccount',
		unit: '栋'
	},
	{
		name: '核验率',
		value: 0,
		res: 'value',
		unit: '%'
	}
])

const getData = async (role) => {
	const result = await zctj_hc({
		date: props.date,
		roletype: role
	})
	Object.keys(result?.data)?.forEach(key => {
		list.value?.map(item => {
			if (item.res === key) item.value = result?.data?.[key]
		})
	})
}

const getPie = async (role, index) => {
	const result = await zctj_hc_pie({
		date: props.date,
		roletype: role
	})
	data.value[index] = result?.data
}

onMounted(() => {
	const roleEnum = {
		0: 4,
		1: 3,
		2: 2,
	}
	data.value.map((item, index) => {
		getPie(roleEnum[index], index)
	})
})

const onClick = index => {
	const indexRole = {
		0: 4,
		1: 3,
		2: 2
	}
	emits('update:modelValue', indexRole[index])
}

watch(() => props.modelValue, val => {
	const roleEnum = {
		4: 0,
		3: 1,
		2: 2
	}
	activeIndex.value = roleEnum[val]
	getData(val)
}, { immediate: true })
</script>

<style scoped lang="less">
.block {
	.list {
		margin: 24px 24px 0;
		display: flex;
		gap: 7px;
		flex-wrap: wrap;
		justify-content:space-evenly;
		.item {
			background: #F6F6F6;
			// flex: 1;
			height: 98px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 158px;
			p {
				height: 40px;
				line-height: 40px;
				font-size: 24px;
				&:nth-of-type(1) {
					span {
						&:nth-of-type(1) {
							font-size: 34px;
							font-weight: 600;
							color: var(--van-primary-color);
							margin-right: 6px;
						}
					}
				}
				&:nth-of-type(2) {
					color: #B9B9B9;
				}
			}
		}
	}
	.chart-list {
		display: flex;
		flex-wrap: wrap;
		padding-bottom: 32px;
		.item {
			height: 33vw;
			width: 33.33%;
			p {
				text-align: center;
			}
			.active {
				color: var(--van-primary-color);
			}
		}
		:deep(.pie-chart) {
			width: 100%;
			height: 30vw;
		}
	}
}
</style>
